<template>
  <div class="slidercaptcha card">
    <div class="card-header">
      <span>{{ isSuccess ? `安全验证通过`: `请完成安全验证` }}</span>
    </div>
    <div class="card-body">
      <div v-show="!isSuccess" id="captcha" ></div>
      <transition name="fade">
        <img v-if="isSuccess" src="@/assets/images/captcha_succeed.png" style="width: 280px;height: 215px;"/>
      </transition>
    </div>
  </div>
</template>

<script>
import "./lib/font-awesome/css/font-awesome.min.css";
import "./disk/slidercaptcha.min.css";
import "./disk/longbow.slidercaptcha.min.js";

export default {
  name: "SliderCaptcha",
  props: {},
  data() {
    return {
      //客户端拖动滑块轨迹
      trackArr: [],
      //是否验证成功
      isSuccess: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var captcha = sliderCaptcha({
        id: "captcha",
        //设置图片加载路径
        setSrc: () => {
          return (
            "http://imgs.blazor.zone/images/Pic" +
            Math.round(Math.random() * 136) +
            ".jpg"
          );
        },
        //图床图片加载失败时调用此方法返回本地图片路径
        localImages: () => {
          return require("./images/Pic" + Math.round(Math.random() * 4) + ".jpg");
        },
        //服务器端验证请求地址，请求方式默认为 post 方式
        remoteUrl: "remoteUrl",
        //服务器端验证方法 arr 为客户端拖动滑块轨迹，url 为服务器端请求地址，返回值为布尔值
        verify: (arr, url) => {
          this.trackArr = arr;
          return true;
        },
        //成功事件
        onSuccess: () => {
          this.isSuccess = true;
          captcha.reset();
          var handler = setTimeout(() => {
            clearTimeout(handler);
            this.$emit("onSuccess", this.trackArr);
            handler = setTimeout(() => { clearTimeout(handler); this.isSuccess = false; }, 150);
          }, 800);
        },
      });
    },
  },
};
</script>


<style>
.slidercaptcha {
  margin: 0 auto;
  width: 314px;
  height: 286px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
  background-color: #fff;
}

.slidercaptcha .card-body {
  padding: 1rem;
}

.slidercaptcha canvas:first-child {
  border-radius: 4px;
  border: 1px solid #e6e8eb;
}

.slidercaptcha.card .card-header {
  background-image: none;
  background-color: rgba(0, 0, 0, 0.03);
  font-weight: bold;
}

.slidercaptcha .refreshIcon {
  top: -56px;
}
.slidercaptcha .refreshIcon:before{
  font-size: 25px;
}
</style>